<template>
  <div class="root">
    <MyHeader title="tabbar 案例"></MyHeader>
    <!-- <MyGoodsList></MyGoodsList>
    <MyGoodsSearch></MyGoodsSearch>
    <MyUserInfo></MyUserInfo> -->
    <!-- 动态组件的使用：component组件结合is属性可以实现一个挂载点，
    切换显示不同的组件(只需要修改is属性的值即可，is属性的值必须和组件名一样才能将对应的组件内容显示出来)
     -->
     <component :is="curComponent"></component>
    <MyTabBar :arr="tabList" @sendData="getCurName"></MyTabBar>
  </div>
</template>

<script> 
/***
 * 需求：点击底部切换显示的组件
 * 1、在头部和底部导航之间添加动态组件component并添加is属性，is属性的值为一个变量，
 * is属性的值初始值为商品列表组件的名子
 * 2、点击底部导航，获取到对应的组件名。
 * 3、将获取到的组件名赋值给is属性绑定的变量即可
 * 
 * */ 
import MyHeader from "./components/MyHeader.vue";
import MyGoodsList from "./views/MyGoodsList.vue";
import MyGoodsSearch from "./views/MyGoodsSearch.vue";
import MyUserInfo from "./views/MyUserInfo.vue";
import MyTabBar from "./components/MyTabBar.vue";
export default {
  components: {
    MyHeader,
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo,
    MyTabBar,
  },
  data(){
    return {
      curComponent: "MyGoodsList",
      tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    }
]
    }
  },
  methods: {
    getCurName(name){
      this.curComponent = name;
    }
  }
};
</script>

<style lang="less" scoped>
.root{
  padding-top: 45px;
}
</style>